<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>客户管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		#messageBox .timeLine {
			height:5px;
			background: #f3f3f3;
		}
		#messageBox .timeLine .time{
			float:left;
			height:5px;
			background: #C52620;
			width:0%;
		}
		#messageBox  .btn{
			margin-left:100px;
			width:200px;
			height:50px;
			padding:0;
			font-size:16px;
			line-height:40px;
		}
	</style>
	<script type="text/javascript">
		global.loginPassword = "${fns:getLoginPw()}";
		var ifshow = ${ifshow};
		var showTime = ${showTime};
		var stockInterval = null;
		var waitTime = 0;
		function checkExamTimeout() {
			//定时刷新，查看诊断是否完成
			$('#messageBox').popup('open');
			if(waitTime > showTime) {
				var info = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;博通克缇专家已经针对您的皮肤订制出了专属方案噢，快快点击查看，和你的美丽来约会吧~';
				$("#messageBox p").html(info);
				$("#messageBox .timeLine").css('display', 'none');
				$("#messageBox .btn").css('display', 'inline-block');
				$("#messageBox .btn").bind("click",function(){
					 $('#messageBox').popup('close');
					 var url = "${ctx}/expert/customerExam/search?id=${customerExamId}";
					 window.open(url, "_self");
				});
				clearInterval(stockInterval);
			}
			var per = 100*waitTime/showTime;
			waitTime++;
			$("#messageBox .time").css('width', per + "%");
		}
		$(document).ready(function() {
			$("#searchForm").validate({
				submitHandler: function(form){
					var type = $('input:radio[name=searchType]:checked').val();
					var key = $('#keyWord').val();
					if (type == '2'){
							if(!isNaN(key)){
							   loading('正在提交，请稍等...');
							   form.submit();
							}else{
							   showTip("电话号码必须是数字！");
							}
					} else {
						 loading('正在提交，请稍等...');
						 form.submit();
					}
				}
			});
			$("#contentTable tbody tr").click(function(){
				$("#contentTable tbody tr").removeClass("select_active");
				$(this).addClass("select_active");
			});
			$("#contentTable tbody tr:first-child").click();
			if(ifshow) {
				$("#messageBox a").css('display', 'none');
				$("#messageBox .btn").css('display', 'none');
				$("#messageBox .timeLine").css('display', 'block');
				stockInterval  = setInterval("checkExamTimeout()",1000);
			}
		});
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
	</script>
</head>
<body>
	<div class="icon-buttons">
		<input type="button" class="leave-clean-session" data-inline="true" data-icon="back" data-iconpos="notext" value="返回"/>
	</div>
	<form:form id="searchForm" modelAttribute="customer" action="${ctx}/base/customer/search" method="post">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
		<fieldset data-role="controlgroup" data-type="horizontal" data-inline="true">
	        <input type="radio" name="searchType" id="radio-choice-a" value="0" ${empty searchType || searchType == '0' ? 'checked' : ''}>
	        <label for="radio-choice-a">姓名</label>
	        <input type="radio" name="searchType" id="radio-choice-b" value="1" ${searchType == '1' ? 'checked' : ''}>
	        <label for="radio-choice-b">备注名</label>
	        <input type="radio" name="searchType" id="radio-choice-c" value="2" ${searchType == '2' ? 'checked' : ''}>
	        <label for="radio-choice-c">手机号码</label>
		</fieldset> 
		<input id="keyWord" name="keyWord" type="search" value="${keyWord}"  class="input-medium"/>
		<input id="btnSubmit" type="submit" value="查询" data-inline="true"/>
	</form:form>
	<tags:message content="${message}"/>
	<table id="contentTable" data-role="table" class="ui-responsive table-stroke">
		<thead><tr><th>姓名</th><th>备注名</th><th>年龄</th><th>体重</th><th>电话</th><th>当前状态</th><th width="150">操作</th></tr></thead>
		<tbody>
		<c:forEach items="${page.list}" var="customer">
			<tr>
				<td>${customer.name}</td>
				<td>${customer.nickname}</td>
				<td>${fns:getAge(customer.birthday)}</td>
				<td>${customer.weight}</td>
				<td>${fns:replaceTel(customer.mobile)}</td>
				<td><c:if test="${hasExpert[customer.id]}">专家已诊断</c:if></td>
				<td>
					<a data-role="button" data-inline="true" onclick="loginPasswordPopup('${ctx}/expert/customerExam/parameterSelect?customer_id=${customer.id}')">开始诊断</a>
				</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="pagination">${page}</div>
	
	<div data-role="popup" id="messageBox" data-overlay-theme="a" data-theme="c" data-dismissible="false" class="ui-corner-all">
	    <div data-role="header" data-theme="a" class="ui-corner-top">
	        <h1>温馨提示</h1>
	    </div>
	    <div data-role="content" style="width:400px" data-theme="d" class="ui-corner-bottom ui-content">
	        <h3 class="ui-title">尊敬的克缇佳人${customerName}：</h3>
	        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您的各项肤况正在上传至博通皮肤专家平台，将由专家亲自分析你的肤况肤质，并制定专属于您的护肤方案，美丽正在前方等您，请稍等......</p>
	        <br />
	        <div class="timeLine"><div class="time"></div></div>
	        <button class="btn" data-role="button" data-inline="true"  data-rel="back" data-theme="a">查看专家推荐方案</button>
	    </div>
	</div>
</body>
</html>
